<template>
  <div class="login">
    <LoginNav />
    <div class="top-title">
      <div class="title">半城咖啡</div>
      <div class="content">COFFEE APP DESIGN</div>
    </div>
      <div class="login-form">
        <div class="login-phone">
          <van-field v-model="loginInfo.phone" type="text" label="手机号" placeholder="请输入手机号" />
        </div>
        <div class="login-password">
          <van-field v-model="loginInfo.password" :type="openEyes ? 'text' : 'password'" label="密码" placeholder="请输入密码" :right-icon="openEyes ?  'eye-o' : 'closed-eye'" @click-right-icon="isOpen" />
        </div>
        <div class="forget-password">
          <span>忘记密码?</span>
        </div>
      </div>
      <div class="login-btn">
        <div class="longin">
          <van-button block color="#21b276" round @click="login">登 录</van-button>
        </div>
        <div class="register">
          <van-button block type="default" round @click="showPopup">注 册</van-button>
        </div>
      </div>
    <div class="login-popup">
      <van-popup v-model="isRegister" closeable position="bottom" :style="{ height: '40%' }" round>
        <div class="popup-title">
          <span>注册</span>
        </div>
        <van-field v-model="registerInfo.phone" type="text" label="手机号" placeholder="请输入手机号" />
        <van-field v-model="registerInfo.password" :type="openEyes ? 'text' : 'password'" label="密码" placeholder="请输入密码" :right-icon="openEyes ?  'eye-o' : 'closed-eye'" @click-right-icon="isOpen" />
        <van-field v-model="registerInfo.nikeName" type="text" label="昵称" placeholder="请输入昵称" />
        <div class="popup-register">
          <van-button block type="default" color="#21b276" round @click="registered" >注 册</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { utils } from '../assets/js/utils';
import "../assets/less/login.less";
import LoginNav from "../components/LoginNav";
export default {
  name: "Login",
  components: {
    LoginNav,
  },
  data() {
    return {
      loginInfo:{
        phone: "",
        password: "",
      },
      registerInfo:{
        phone:'',
        password:'',
        nikeName: "",
      },
      isRegister: false,
      openEyes: false,
    };
  },
  methods: {
    showPopup() {
      this.isRegister = !this.isRegister;
    },
    isOpen() {
      this.openEyes = !this.openEyes;
    },
    registered(){
      let o = {
        phone:{
          value:this.registerInfo.phone,
          reg:/^1[3-9]\d{9}$/,
          errorMsg:'请输入11位正确手机号'
        },
        password:{
          value:this.registerInfo.password,
          reg:/^[A-Za-z]\w{5,15}$/,
          errorMsg:"密码由6到16位首字符组成,且首字符为字母"
        },
        nikeName:{
          value:this.registerInfo.nikeName,
          reg:/^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
          errorMsg:'昵称仅支持10位汉字,字母,数字组合'
        }

      };
      if(!utils.validForm(o)){
        return;
      }

      this.$toast.loading({
        message:'加载中...',
        forbidClick:true,
        duration:0
      });

      this.axios({
        method:'POST',
        url: this.baseUrl + '/register',
        data:{
          appkey:this.appkey,
          nikeName:this.registerInfo.nikeName,
          phone:this.registerInfo.phone,
          password:this.registerInfo.password
        }
      }).then(res =>{
        // console.log('res ==> ', res);
        this.$toast.clear();
        if(res.data.code == 100){
          this.isRegister = false;
          for ( let key in this.registerInfo){
            this.registerInfo[key] = '';
          }
        }else{
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration:3000
          })
        }
      }).catch(err=>{
        this.$toast.clear();
        console.log(err);
      })
    },
    login(){
      let i = {
        phone:{
          value:this.loginInfo.phone,
          reg:/^1[3-9]\d{9}$/,
          errorMsg:'请输入11位正确手机号'
        },
        password:{
          value:this.loginInfo.password,
          reg:/^[A-Za-z]\w{5,15}$/,
          errorMsg:"密码由6到16位首字符组成,且首字符为字母"
        }

      };
      if(!utils.validForm(i)){
        return;
      }
      this.$toast.loading({
        message:'加载中...',
        forbidClick:true,
        duration:0
      });

      this.axios({
        method:'POST',
        url: this.baseUrl + '/login',
        data:{
          appkey:this.appkey,
          phone:this.loginInfo.phone,
          password:this.loginInfo.password
        }
      }).then(res =>{
        // console.log('res ==> ', res);
        this.$toast.clear();
        if(res.data.code == 200){
          this.$cookies.set('tokenString',res.data.token,'1d')
          // 跳转到其他页面
          this.$router.go(-1)
        }else{
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration:3000
          })
        }
      }).catch(err=>{
        this.$toast.clear();
        console.log(err);
      })
    },

  },
};
</script>
